<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 2000px;
        }
        
        #box {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            position: relative;
            margin-top: 200px;
            transform-style: preserve-3d;
            /* transform: rotate3d(1, 1, 0, 45deg); */
            animation: run 5s linear infinite;
        }
        
        @keyframes run {
            0% {
                transform: rotate3d(0, 0, 0, 0deg);
            }
            25% {
                transform: rotate3d(0, 0, 1, 90deg);
            }
            50% {
                transform: rotate3d(0, 1, 0, 180deg);
            }
            75% {
                transform: rotate3d(0, 1, 1, 270deg);
            }
            100% {
                transform: rotate3d(1, 1, 1, 0deg);
            }
        }
        
        #box div {
            width: 300px;
            height: 300px;
            line-height: 300px;
            position: absolute;
            border: 1px solid black;
            text-align: center;
            font-size: 30px;
            transition: all 2s;
            overflow: hidden;
        }
        
        div img {
            width: 100%;
            height: 100%;
        }
        
        .top {
            transform: rotateX(90deg) translateZ(150px);
        }
        
        .bottom {
            transform: rotateX(90deg) translateZ(-150px);
        }
        
        .left {
            transform: rotateY(90deg) translateZ(-150px);
        }
        
        .right {
            transform: rotateY(90deg) translateZ(150px);
        }
        
        .front {
            transform: translateZ(150px);
        }
        
        .back {
            transform: translateZ(-150px);
        }
        
        #box:hover .top {
            transform: rotateX(90deg) translateZ(300px);
            border-radius: 50%;
        }
        
        #box:hover .bottom {
            transform: rotateX(90deg) translateZ(-300px);
            border-radius: 50%;
        }
        
        #box:hover .left {
            transform: rotateY(90deg) translateZ(-300px);
            border-radius: 50%;
        }
        
        #box:hover .right {
            transform: rotateY(90deg) translateZ(300px);
            border-radius: 50%;
        }
        
        #box:hover .front {
            transform: translateZ(300px);
            border-radius: 50%;
        }
        
        #box:hover .back {
            transform: translateZ(-300px);
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="left"><img src="img/立方体1.webp" alt=""></div>
        <div class="right"><img src="img/立方体2.webp" alt=""></div>
        <div class="top"><img src="img/立方体3.webp" alt=""></div>
        <div class="bottom"><img src="img/立方体4.webp" alt=""></div>
        <div class="front"><img src="img/立方体5.webp" alt=""></div>
        <div class="back"><img src="img/立方体6.webp" alt=""></div>
    </div>
</body>

</html>